<template>
  <div class="ele-body">
    <el-card body-style="padding-top: 5px;" shadow="never">
      <div slot="header" class="clearfix">
        <span>系统设置</span>
      </div>
			
      <el-tabs v-model="active">
        <!--<el-tab-pane label="基本信息" name="basic">
          <el-form
            ref="basicForm"
            :model="basicForm"
            label-width="120px"
            style="max-width: 450px; padding-top: 40px"
            @submit.native.prevent
          >
            <el-form-item label="站点名称:">
              <el-input
                v-model="basicForm.sitename"
                clearable
                placeholder="请输入站点名称"
              />
            </el-form-item>
            <el-form-item label="版权信息:">
              <el-input
                v-model="basicForm.siteversion"
                clearable
                placeholder="请输入版权信息"
              />
            </el-form-item>
            <el-form-item label="统计代码:">
              <el-input
                v-model="basicForm.sitestatistics"
                :rows="4"
                placeholder="请输入统计代码"
                type="textarea"
              />
            </el-form-item>
            <el-form-item>
              <el-button :loading="loading" type="primary" @click="basicsave"
                >确定更改
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>-->

        <el-tab-pane label="OCPC设置" name="ocpc">
          <el-form
            ref="ocpcForm"
            :model="ocpcForm"
            label-width="120px"
            style="max-width: 450px; padding-top: 40px"
            @submit.native.prevent
          >
            <el-form-item label="百度OCPC:" prop="baiduocpc">
              <el-input
                v-model="ocpcForm.baiduocpc"
                clearable
                placeholder="复制停留时长大于多少秒上报"
              />
            </el-form-item>

            <el-form-item label="信息流OCPC:" prop="baiduexocpc">
              <el-input
                v-model="ocpcForm.baiduexocpc"
                clearable
                placeholder="复制停留时长大于多少秒上报"
              />
            </el-form-item>

            <el-form-item>
              <el-button :loading="loading" type="primary" @click="ocpcsave"
                >确定更改
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="蜘蛛IP拦截" name="spider">
          <el-form
            ref="spiderForm"
            :model="spiderForm"
            label-width="120px"
            style=" padding-top: 40px"
            @submit.native.prevent
          >
            <el-form-item label="蜘蛛IP段:">
              <el-input
                v-model="spiderForm.interceptingip"
                :rows="18"
                placeholder="请输入蜘蛛IP段"
                type="textarea"
              />
            </el-form-item>

            <el-form-item>
              <el-button :loading="loading" type="primary" @click="spidersave"
                >确定更改
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="Nginx配置" name="Nginx">
          <el-form
            label-width="120px"
            style="max-width: 450px; padding-top: 40px"
            @submit.native.prevent
          >
            <el-form-item label="Nginx参数:">
              <el-select
                v-model="nginxValue"
                class="ele-block"
                clearable
                multiple
                placeholder="请选择Nginx配置"
                style="width: 600px"
                @change="nginxChanged"
              >
                <el-option
                  v-for="item in NginxList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="Nginx配置:">
              <el-input
                v-model="nginxText"
                ref="nginxText"
                :readonly="true"
                :rows="16"
                placeholder=""
                style="width: 600px"
                type="textarea"
              />
            </el-form-item>

            <el-form-item>
              <el-button :loading="loading" type="primary" @click="copyNginx"
                >复制配置
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { messageLoading } from "@/panel";

export default {
  name: "SystemSetting",
  data() {
    return {
      // tab页选中
      active: "ocpc",

      // 表单数据
      basicForm: {
        sitename: "",
        siteversion: "",
        sitestatistics: "",
      },

      // 表单数据
      ocpcForm: {
        baiduocpc: 5,
        baiduexocpc: 5,
      },

      // 表单数据
      spiderForm: {
        interceptingip: "",
      },

      // 表单数据
      nginxText:
        "\n\t#access_page begin tag\n" +
        "\tset $http_path_true  真网站绝对路径;\n" +
        "\tset $http_path_false 假网站绝对路径;\n" +
        "\tset $http_allow_flag 1;\n" +
        "\t# 如果未检测到百度APP特征码返回假\n" +
        '\tif ($http_user_agent !~* "baiduboxapp") {\n' +
        "\t\tset $http_allow_flag 0;\n" +
        "\t}\n" +
        "\tset $http_root_path $http_path_true;\n" +
        "\tif ($http_allow_flag = 0) {\n" +
        "\t\tset $http_root_path $http_path_false;\n" +
        "\t}\n" +
        "\troot $http_root_path;\n" +
        "\tlocation ~* .(htm|html)$ {\n" +
        "\t\tadd_header Set-Cookie 'H_INDEX_ACCESS=Access-Reject';\n" +
        "\t\tif ($http_allow_flag = 1) {\n" +
        "\t\t\tadd_header Set-Cookie 'H_INDEX_ACCESS=Access-Accept';\n" +
        "\t\t}\n" +
        "\t}\n" +
        "\tlocation ~ ^/ {\n" +
        '\t\tset $http_access_flag "Access-Reject";\n' +
        '\t\tif ($http_cookie ~* "H_INDEX_ACCESS=(.+?)(?=;|$)") {\n' +
        "\t\t\tset $http_access_flag $1;\n" +
        "\t\t}\n" +
        '\t\tif ($http_access_flag = "Access-Accept") {\n' +
        "\t\t\troot $http_path_true;\n" +
        "\t\t}\n" +
        "\t}\n" +
        "\t#access_page end tag\n",
      NginxList: [
        { value: 0, label: "开启检测百度APP" },
        { value: 1, label: "开启检测微信" },
        { value: 2, label: "开启检测BD_VID" },
      ],
      nginxValue: [0],
      // 确定按钮loading
      loading: false,
    };
  },
  created: function () {
    this.query();
  },
  methods: {
    nginxChanged(obj) {
      const arr = [
        "\t# 如果未检测到百度APP特征码返回假\n" +
          '\tif ($http_user_agent !~* "baiduboxapp") {\n' +
          "\t\tset $http_allow_flag 0;\n" +
          "\t}\n",
        "\t# 如果检测到微信特征码返回真\n" +
          '\tif ($http_user_agent ~* "micromessenger") {\n' +
          "\t\tset $http_allow_flag 1;\n" +
          "\t}\n",
        "\t# 如果未检测到百度VID返回假\n" +
          '\tif ($query_string !~* "bd_vid=") {\n' +
          "\t\tset $http_allow_flag 0;\n" +
          "\t}\n",
      ];
      let array = [];
      let template =
        "\n" +
        "\t#access_page begin tag\n" +
        "\tset $http_path_true  真网站绝对路径;\n" +
        "\tset $http_path_false 假网站绝对路径;\n" +
        "\tset $http_allow_flag 1;\nparameter" +
        "\tset $http_root_path $http_path_true;\n" +
        "\tif ($http_allow_flag = 0) {\n" +
        "\t\tset $http_root_path $http_path_false;\n" +
        "\t}\n" +
        "\troot $http_root_path;\n" +
        "\tlocation ~* .(htm|html)$ {\n" +
        "\t\tadd_header Set-Cookie 'H_INDEX_ACCESS=Access-Reject';\n" +
        "\t\tif ($http_allow_flag = 1) {\n" +
        "\t\t\tadd_header Set-Cookie 'H_INDEX_ACCESS=Access-Accept';\n" +
        "\t\t}\n" +
        "\t}\n" +
        "\tlocation ~ ^/ {\n" +
        '\t\tset $http_access_flag "Access-Reject";\n' +
        '\t\tif ($http_cookie ~* "H_INDEX_ACCESS=(.+?)(?=;|$)") {\n' +
        "\t\t\tset $http_access_flag $1;\n" +
        "\t\t}\n" +
        '\t\tif ($http_access_flag = "Access-Accept") {\n' +
        "\t\t\troot $http_path_true;\n" +
        "\t\t}\n" +
        "\t}\n" +
        "\t#access_page end tag\n";
      for (let key in obj) {
        array.push(arr[obj[key]]);
      }
      this.nginxText = template.replace("parameter", array.join(""));
    },
    select(element) {
      let selectedText;
      if (element.nodeName === "SELECT") {
        element.focus();
        selectedText = element.value;
      } else if (
        element.nodeName === "INPUT" ||
        element.nodeName === "TEXTAREA"
      ) {
        let isReadOnly = element.hasAttribute("readonly");
        if (!isReadOnly) {
          element.setAttribute("readonly", "");
        }
        element.select();
        element.setSelectionRange(0, element.value.length);
        if (!isReadOnly) {
          element.removeAttribute("readonly");
        }
        selectedText = element.value;
      } else {
        if (element.hasAttribute("contenteditable")) {
          element.focus();
        }
        let selection = window.getSelection();
        let range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
        selectedText = selection.toString();
      }
      return selectedText;
    },
    copy(element) {
      try {
        this.select(element);
        return document.execCommand("copy");
      } catch (err) {
        return false;
      }
    },

    copyNginx() {
      this.loading = true;
      let result = this.copy(this.$refs.nginxText.$el);
      if (result) {
        this.loading = false;
        return this.$message({
          type: "success",
          message: "已成功复制，可直接去粘贴!",
        });
      }
      this.loading = false;
      this.$message.error("复制失败!");
    },
    query() {
      const loading = messageLoading("正在请求中..");
      this.$http
        .get("sys/site", { params: { t: new Date().getTime() } })
        .then((res) => {
          loading.close();
          if (res.data.code === 0) {
            this.spiderForm = res.data.data.spider;
            this.basicForm = res.data.data.site;
            this.ocpcForm = res.data.data.ocpc;
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    basicsave() {
      this.$refs["basicForm"].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$http
            .put("sys/site", this.basicForm)
            .then((res) => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message.success(res.data.msg);
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },
    ocpcsave() {
      this.$refs["ocpcForm"].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$http
            .put("sys/ocpc", this.ocpcForm)
            .then((res) => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message.success(res.data.msg);
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },
    spidersave() {
      this.$refs["spiderForm"].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$http
            .put("sys/spider", this.spiderForm)
            .then((res) => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message.success(res.data.msg);
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
